<template>
  <div class="dashboard-container">
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6" v-for="item in statisticsData" :key="item.title">
        <el-card class="data-card" shadow="hover">
          <div class="data-content">
            <div class="data-meta">
              <div class="data-icon" :style="{ background: item.bgColor }">
                <el-icon :style="{ color: item.iconColor }"><component :is="item.icon" /></el-icon>
              </div>
              <div class="data-title">{{ item.title }}</div>
            </div>
            <div class="data-info">
              <div class="data-value">{{ item.value }}</div>
              <div class="data-trend" :class="item.trend">
                <el-icon><component :is="item.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                <span>{{ item.rate }}%</span>
                <span class="trend-text">{{ item.trend === 'up' ? '较上周' : '较上周' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card class="calendar-card">
          <template #header>
            <div class="module-header">
              <div class="header-left">
                <el-icon><Calendar /></el-icon>
                <span>日程提醒</span>
              </div>
              <el-button type="primary" link @click="handleAddEvent">
                <el-icon><Plus /></el-icon>添加日程
              </el-button>
            </div>
          </template>
          <div class="calendar-content">
            <el-calendar v-model="currentDate">
              <template #header="{ date }">
                <div class="calendar-header">
                  <span>{{ formatDate(date) }}</span>
                  <div class="calendar-actions">
                    <el-button-group>
                      <el-button size="small" @click="handlePrevWeek">
                        <el-icon><ArrowLeft /></el-icon>
                      </el-button>
                      <el-button size="small" @click="handleNextWeek">
                        <el-icon><ArrowRight /></el-icon>
                      </el-button>
                    </el-button-group>
                  </div>
                </div>
              </template>
              <template #dateCell="{ data }">
                <div class="calendar-cell">
                  <span :class="{ 'is-today': isToday(data.day), 'is-current': data.day === currentDate }">
                    {{ data.day.split('-').slice(2).join('') }}
                  </span>
                  <div class="event-dots" v-if="hasEvent(data.day)">
                    <el-tooltip 
                      v-for="(event, index) in getEvents(data.day)" 
                      :key="index"
                      :content="event.title"
                      placement="top"
                    >
                      <span 
                        class="event-dot" 
                        :style="{ background: event.color }"
                        @click.stop="showEventDetail(event)"
                      ></span>
                    </el-tooltip>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="10">
        <el-card class="contacts-card">
          <template #header>
            <div class="module-header">
              <div class="header-left">
                <el-icon><UserFilled /></el-icon>
                <span>常用联系人</span>
              </div>
              <el-button type="primary" link @click="openChatWithNewContact">
                <el-icon><Plus /></el-icon>添加联系人
              </el-button>
            </div>
          </template>
          <div class="contacts-list">
            <div v-for="contact in contacts" :key="contact.id" class="contact-item">
              <div class="contact-info">
                <div class="avatar-wrapper">
                  <el-avatar :size="32" :src="contact.avatar">
                    {{ contact.name.charAt(0) }}
                  </el-avatar>
                  <div v-if="contact.unreadCount" class="unread-badge">
                    {{ contact.unreadCount > 99 ? '99+' : contact.unreadCount }}
                  </div>
                </div>
                <div class="contact-detail">
                  <div class="contact-name">{{ contact.name }}</div>
                  <div class="contact-role">{{ contact.role }}</div>
                </div>
              </div>
              <div class="contact-actions">
                <el-tooltip content="发送消息" placement="top">
                  <el-button type="primary" link @click="openQuickChat(contact)">
                    <el-icon><Message /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="查看详情" placement="top">
                  <el-button type="primary" link @click="handleViewContact(contact)">
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="weather-card">
          <template #header>
            <div class="module-header">
              <div class="header-left">
                <el-icon><Sunny /></el-icon>
                <span>天气预报</span>
              </div>
              <el-button type="primary" link>
                <el-icon><Refresh /></el-icon>刷新
              </el-button>
            </div>
          </template>
          <div class="weather-content">
            <div class="weather-left">
              <div class="weather-main">
                <div class="weather-icon">
                  <el-icon><component :is="weatherInfo.icon" /></el-icon>
                </div>
                <div class="weather-basic">
                  <div class="temperature">{{ weatherInfo.temperature }}</div>
                  <div class="weather-desc">{{ weatherInfo.weather }}</div>
                </div>
              </div>
              <div class="location">
                <el-icon><Location /></el-icon>
                {{ weatherInfo.city }}
              </div>
            </div>
            <div class="weather-right">
              <div class="weather-detail">
                <div class="detail-item">
                  <span>湿度</span>
                  <span>{{ weatherInfo.humidity }}%</span>
                </div>
                <div class="detail-item">
                  <span>风速</span>
                  <span>{{ weatherInfo.windSpeed }}km/h</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="module-header">
              <div class="header-left">
                <el-icon><TrendCharts /></el-icon>
                <span>访问统计</span>
              </div>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="chartRef" class="chart-content"></div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="todo-card">
          <template #header>
            <div class="module-header">
              <div class="header-left">
                <el-icon><List /></el-icon>
                <span>待办事项</span>
              </div>
              <el-button type="primary" link>
                <el-icon><More /></el-icon>查看全部
              </el-button>
            </div>
          </template>
          <div class="todo-content">
            <el-empty v-if="todoList.length === 0" description="暂无待办事项" />
            <ul v-else class="todo-list">
              <li v-for="item in todoList" :key="item.id" class="todo-item">
                <div class="todo-info">
                  <el-tag :type="item.type" size="small" effect="light">{{ item.tag }}</el-tag>
                  <span class="todo-title">{{ item.title }}</span>
                </div>
                <div class="todo-meta">
                  <span class="todo-time">{{ item.time }}</span>
                  <el-button type="primary" link size="small" @click="handleTodoAction(item)">
                    {{ item.actionText }}
                  </el-button>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      v-model="dialogVisible"
      title="添加日程"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="eventForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="eventForm.title" placeholder="请输入日程标题" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="eventForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="eventForm.type" style="width: 100%">
            <el-option label="会议" value="meeting" />
            <el-option label="任务" value="task" />
            <el-option label="提醒" value="reminder" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveEvent">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加聊天对话框 -->
    <chat-dialog
      v-model="quickChatVisible"
      :contact="currentContact"
      mode="quick"
    />

    <chat-dialog
      v-model="fullChatVisible"
      :contact="currentContact"
      mode="full"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { 
  User, 
  Monitor, 
  Setting, 
  ArrowUp, 
  ArrowDown,
  Connection,
  Finished,
  Timer,
  Message,
  View,
  Calendar,
  Plus,
  UserFilled,
  TrendCharts,
  List,
  More,
  Sunny,
  Location,
  Lightning,
  Cloudy,
  Moon,
  ArrowLeft,
  ArrowRight,
  Refresh
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import ChatDialog from '@/components/ChatDialog.vue'
import request from '@/utils/request'
const userStore = useUserStore()
const router = useRouter()
const currentDate = ref(new Date())
const dialogVisible = ref(false)
const chatVisible = ref(false)
const currentContact = ref(null)

const eventForm = ref({
  title: '',
  date: '',
  type: 'meeting'
})

// 模拟事件数据
const events = ref([
  {
    date: '2024-01-18',
    title: '项目评审会议',
    type: 'meeting',
    color: '#1890ff'
  },
  {
    date: '2024-01-18',
    title: '系统上线',
    type: 'task',
    color: '#52c41a'
  },
  {
    date: '2024-01-20',
    title: '团队周会',
    type: 'meeting',
    color: '#722ed1'
  }
])


const hasEvent = (day) => {
  return events.value.some(event => event.date === day)
}

const getEvents = (day) => {
  return events.value.filter(event => event.date === day)
}

const showEventDetail = (event) => {
  ElMessage.info(`${event.title} (${event.type})`)
}

const handleAddEvent = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  eventForm.value = {
    title: '',
    date: '',
    type: 'meeting'
  }
}

const handleSaveEvent = () => {
  if (!eventForm.value.title || !eventForm.value.date) {
    ElMessage.warning('请填写完整信息')
    return
  }

  const colors = {
    meeting: '#1890ff',
    task: '#52c41a',
    reminder: '#faad14'
  }

  events.value.push({
    ...eventForm.value,
    date: eventForm.value.date.toISOString().split('T')[0],
    color: colors[eventForm.value.type]
  })
  ElMessage.success('添加成功')
  handleClose()
}

// 模拟待办事项数据
const todoList = ref([
  {
    id: 1,
    title: '待审批的应用接入申请',
    tag: '审批',
    type: 'warning',
    time: '2024-01-18 10:30',
    actionText: '去审批'
  },
  {
    id: 2,
    title: '系统权限变更提醒',
    tag: '权限',
    type: 'info',
    time: '2024-01-18 09:15',
    actionText: '看'
  },
  {
    id: 3,
    title: '新用户注册待确认',
    tag: '用户',
    type: 'success',
    time: '2024-01-18 08:45',
    actionText: '确认'
  }
])

const handleTodoAction = (item) => {
  ElMessage.success(`正在处理：${item.title}`)
}

// 统计数据
const statisticsData = [
  {
    title: '活跃用户',
    value: '12,321',
    icon: 'User',
    trend: 'up',
    rate: '15.4',
    bgColor: '#e6f7ff',
    iconColor: '#1890ff'
  },
  {
    title: '系统访问',
    value: '42,234',
    icon: 'Monitor',
    trend: 'up',
    rate: '12.3',
    bgColor: '#f6ffed',
    iconColor: '#52c41a'
  },
  {
    title: '授权应用',
    value: '134',
    icon: 'Connection',
    trend: 'down',
    rate: '2.3',
    bgColor: '#fff7e6',
    iconColor: '#faad14'
  },
  {
    title: '平均响应',
    value: '0.24s',
    icon: 'Timer',
    trend: 'up',
    rate: '3.2',
    bgColor: '#f9f0ff',
    iconColor: '#722ed1'
  }
]

// 图表相关
const chartRef = ref(null)
const timeRange = ref('week')
let chart = null

// 修改图表初始化方法
const initChart = () => {
  if (!chartRef.value) return
  
  // 使用 CDN 方式
  const echarts = window.echarts
  if (!echarts) {
    console.error('echarts 未加载')
    return
  }
  
  try {
    if (!chart) {
      chart = echarts.init(chartRef.value)
    }
    
    const data = getChartData()
    chart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['访问量', '用户量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '访问量',
          type: 'line',
          smooth: true,
          data: data.series[0],
          itemStyle: {
            color: '#1890ff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(24,144,255,0.3)'
              }, {
                offset: 1, color: 'rgba(24,144,255,0.1)'
              }]
            }
          }
        },
        {
          name: '用户量',
          type: 'line',
          smooth: true,
          data: data.series[1],
          itemStyle: {
            color: '#52c41a'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(82,196,26,0.3)'
              }, {
                offset: 1, color: 'rgba(82,196,26,0.1)'
              }]
            }
          }
        }
      ]
    })
  } catch (error) {
    console.error('初始化图表失败:', error)
  }
}

// 修改 onMounted 钩子
onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
})

// 监听时间范围变化
watch(timeRange, () => {
  nextTick(() => {
    updateChart()
  })
})

// 监听窗大小变化
const handleResize = () => {
  chart?.resize()
}

onUnmounted(() => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', handleResize)
})

// 修改联系人数据，添加消息ID
const contacts = ref([
  {
    id: 1,
    name: '张三',
    role: '系统管理员',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 3,
    unreadMessages: [101, 102, 103] // 添加未读消息ID
  },
  {
    id: 2,
    name: '李四',
    role: '技术支持',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 12,
    unreadMessages: Array.from({length: 12}, (_, i) => 200 + i)
  },
  {
    id: 3,
    name: '王五',
    role: '产品经理',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 0,
    unreadMessages: []
  }
])

// 添加聊天相关的响应式变量
const quickChatVisible = ref(false)  // 快速聊天窗口
const fullChatVisible = ref(false)   // 完整聊天窗口

// 修改打开聊天的方法
const openQuickChat = async (contact) => {
  currentContact.value = contact
  quickChatVisible.value = true
  
  // 如果有未读消息，标记为已读
  if (contact.unreadCount > 0) {
    try {
      // 调用后端接口标记消息为已读
      await request.post('/api/messages/mark-read', {
        contactId: contact.id,
        messageIds: contact.unreadMessages
      })
      // 更新本地状态
      contact.unreadCount = 0
      contact.unreadMessages = []
    } catch (error) {
      ElMessage.error('标记已读失败')
    }
  }
}

// 完整聊天（新的样式）
const openChatWithNewContact = () => {
  currentContact.value = null  // 清空当前联系人
  fullChatVisible.value = true
}

// 添加标记消息已读的方法
const markMessagesAsRead = async (contactId, messageIds) => {
  try {
    // 这里调用后端接口
    await request.post('/api/messages/mark-read', {
      contactId,
      messageIds
    })
  } catch (error) {
    console.error('标记消息已读失败:', error)
    throw error
  }
}

// 添加联系人相关方法
const handleAddContact = () => {
  ElMessage.info('添加联系人功能开发中...')
}

const handleMessage = (contact) => {
  ElMessage.success(`正在打开与 ${contact.name} 的聊天窗口...`)
}

const handleViewContact = (contact) => {
  ElMessage.info(`查看 ${contact.name} 的详细信息...`)
}

// 添加天气数据
const weatherInfo = ref({
  temperature: 26,
  weather: '晴',
  icon: 'Sunny',
  city: '北京市',
  humidity: 45,
  windSpeed: 3.5
})

// 修改日期格式化函数
const formatDate = (date) => {
  try {
    const dateObj = new Date(date)
    if (isNaN(dateObj.getTime())) {
      return '日期无效'
    }
    const month = dateObj.getMonth() + 1
    return `${month}月`
  } catch (error) {
    console.error('日期格式化错误:', error)
    return '日期无效'
  }
}

// 添加周切换函数
const handlePrevWeek = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() - 7)
  currentDate.value = newDate
}

const handleNextWeek = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() + 7)
  currentDate.value = newDate
}

const openChat = (contact) => {
  currentContact.value = contact
  chatVisible.value = true
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content {
  color: #666;
  line-height: 1.8;
}

.todo-card {
  margin-bottom: 20px;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}
.todo-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.todo-title {
  color: #333;
}

.todo-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.todo-time {
  color: #999;
  font-size: 13px;
}

.user-card {
  height: 100%;
}

.user-header {
  font-weight: bold;
}

.user-content {
  text-align: center;
  padding: 20px 0;
}

.user-content h3 {
  margin: 16px 0 8px;
  color: #333;
}

.user-content p {
  margin: 0;
  color: #666;
}

.calendar-card {
  margin-top: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.calendar-content {
  margin-top: -20px;
}


.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.event-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-top: 4px;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s;
}

.event-dot:hover {
  transform: scale(1.5);
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 60px;
  padding: 0;
}

:deep(.el-calendar-table td.is-selected) {
  background: #e6f7ff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.data-overview {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.data-card {
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 28px 24px;
  height: auto;
  background: linear-gradient(to right bottom, #fff, #fafafa);
  border: 1px solid #f0f0f0;
}

.data-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.data-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.data-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.data-icon .el-icon {
  font-size: 26px;
}

.data-title {
  color: #666;
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
}

.data-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-value {
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(45deg, var(--color, #1890ff), var(--color-dark, #1d39c4));
  -webkit-background-clip: text;
  color: transparent;
  font-family: DIN Alternate, Arial, sans-serif;
  line-height: 1;
  margin-bottom: 2px;
}

.data-trend {
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 6px;
  justify-content: flex-end;
  font-family: DIN Alternate, Arial, sans-serif;
  padding-right: 2px;
}

.trend-text {
  color: #999;
  font-size: 12px;
  margin-left: 6px;
}

.data-trend.up {
  color: #52c41a;
}

.data-trend.down {
  color: #ff4d4f;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

.data-card:hover .data-icon {
  transform: scale(1.1);
}

/* 为每个卡片设置不同的渐变色 */
.data-card:nth-child(1) {
  --color: #1890ff;
  --color-dark: #1d39c4;
}

.data-card:nth-child(2) {
  --color: #52c41a;
  --color-dark: #389e0d;
}

.data-card:nth-child(3) {
  --color: #722ed1;
  --color-dark: #531dab;
}

.data-card:nth-child(4) {
  --color: #faad14;
  --color-dark: #d48806;
}

@media screen and (max-width: 1400px) {
  .data-card {
    padding: 24px 20px;
  }
  
  .data-value {
    font-size: 22px;
  }
  
  .data-icon {
    width: 48px;
    height: 48px;
  }
  
  .data-icon .el-icon {
    font-size: 24px;
  }
}

@media screen and (max-width: 1200px) {
  .data-card {
    padding: 20px 16px;
  }
  
  .data-content {
    gap: 16px;
  }
  
  .data-meta {
    gap: 12px;
  }
  
  .data-value {
    font-size: 20px;
  }
}

.chart-card {
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.chart-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.09);
}

.todo-card, .calendar-card, .contacts-card {
  transition: all 0.3s;
}

.todo-card:hover, .calendar-card:hover, .contacts-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.09);
}

.todo-item {
  padding: 16px 0;
  transition: all 0.3s;
}

.todo-item:hover {
  background: #fafafa;
  padding: 16px 12px;
  margin: 0 -12px;
  border-radius: 4px;
}

.contact-item {
  padding: 16px 0;
  transition: all 0.3s;
}

.contact-item:hover {
  background: #fafafa;
  padding: 16px 12px;
  margin: 0 -12px;
  border-radius: 4px;
}

:deep(.el-card__header) {
  border-bottom: none;
  padding: 16px 20px;
}

:deep(.el-card__body) {
  padding: 0 20px 20px;
}

:deep(.el-calendar) {
  --el-calendar-cell-width: 42px;
  --el-calendar-header-height: 28px;
}

:deep(.el-calendar__header) {
  padding: 0;
  margin-bottom: 12px;
}

:deep(.el-calendar-table td) {
  padding: 2px;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 42px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:deep(.el-button--primary.is-link) {
  &:hover {
    color: var(--el-color-primary-light-3);
  }
  &:active {
    color: var(--el-color-primary-dark-2);
  }
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contacts-card {
  margin-top: 20px;
}

.contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.contacts-list {
  margin: -10px 0;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.contact-role {
  font-size: 12px;
  color: #999;
}

.contact-actions {
  display: flex;
  gap: 8px;
}

.contact-actions .el-button {
  padding: 4px;
}

.contact-actions .el-icon {
  font-size: 16px;
}

:deep(.el-card) {
  border-radius: 16px;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 
              0 1px 6px -1px rgba(0, 0, 0, 0.02), 
              0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-card:hover) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}


:deep(.el-tag) {
  border-radius: 12px;
  padding: 0 12px;
  height: 24px;
  line-height: 24px;
}

:deep(.el-button) {
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-calendar-table td) {
  border-radius: 8px;
}

.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-avatar) {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-value {
  background: linear-gradient(45deg, #1890ff, #1d39c4);
  -webkit-background-clip: text;
  color: transparent;
}

.chart-container {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-dropdown-menu) {
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

:deep(.el-dropdown-menu__item) {
  border-radius: 8px;
  padding: 8px 16px;
}

/* 移除用户卡片相关样式 */
.user-card,
.user-header,
.user-content {
  display: none;
}

/* 调整其他卡片的间距 */
.welcome-card,
.todo-card,
.calendar-card,
.contacts-card {
  margin-bottom: 20px;
}

/* 调整卡片高度 */
.calendar-card,
.contacts-card {
  height: 280px;  /* 减小高度 */
  margin-bottom: 0;
}

.calendar-content {
  height: calc(100% - 48px);  /* 调整内容区域高度 */
  overflow: auto;
}

.contacts-list {
  height: calc(100% - 48px);  /* 调整内容区域高度 */
  overflow: auto;
  padding: 0 10px;
}

/* 美化滚动条 */
.calendar-content::-webkit-scrollbar,
.contacts-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.calendar-content::-webkit-scrollbar-thumb,
.contacts-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e0e0e0;
}

.calendar-content::-webkit-scrollbar-track,
.contacts-list::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #f5f5f5;
}

/* 调整日历样式 */
:deep(.el-calendar) {
  --el-calendar-cell-width: 36px;
  --el-calendar-header-height: 24px;
  border: none;
}

:deep(.el-calendar__header) {
  padding: 0 12px;
  margin-bottom: 8px;
  border-bottom: none;
}

:deep(.el-calendar-table) {
  border-spacing: 4px;
  border: none;
}

:deep(.el-calendar-table td) {
  border: none;
  padding: 2px;
}

:deep(.el-calendar-table th) {
  text-align: center;
  padding: 6px 0;
  border: none;
  font-weight: normal;
  color: #999;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 32px;
  padding: 4px;
  text-align: center;
  border-radius: 6px;
  transition: all 0.3s;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
  background-color: #f5f7fa;
}

.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.calendar-cell span {
  font-size: 13px;
  color: #666;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  transition: all 0.3s;
}

.calendar-cell .is-today {
  background: #1890ff;
  color: #fff;
}

.calendar-cell .is-current {
  color: #1890ff;
  font-weight: 500;
}

.event-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
  height: 6px;
}

.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}

.event-dot:hover {
  transform: scale(1.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 添加日历周末样式 */
:deep(.el-calendar-table tr td:last-child),
:deep(.el-calendar-table tr td:nth-last-child(2)) {
  color: #ff4d4f;
}

/* 优化日历头部样式 */
:deep(.el-calendar__title) {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

:deep(.el-calendar__button-group) {
  display: flex;
  gap: 8px;
}

:deep(.el-calendar__button-group .el-button) {
  border-radius: 4px;
  padding: 4px 8px;
}

/* 添加事件提示动画 */
.event-dot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 优化日历内容区域 */
.calendar-content {
  padding: 0 12px;
  height: calc(100% - 40px);
}

/* 添加更多事件的提示 */
.event-dots {
  position: relative;
}

.event-dots:hover::after {
  content: attr(data-count);
  position: absolute;
  top: -20px;
  right: -10px;
  background: #1890ff;
  color: #fff;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}

/* 修改日历样式 */
:deep(.el-calendar) {
  --el-calendar-cell-width: 36px;
  --el-calendar-header-height: 24px;
  border: none;
}

:deep(.el-calendar__header) {
  padding: 0 12px;
  margin-bottom: 8px;
  border-bottom: none;
}

/* 隐藏多余的周 */
:deep(.el-calendar-table tr:nth-child(n+4)) {
  display: none;
}

/* 优化日历头部样式 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.calendar-actions {
  display: flex;
  gap: 8px;
}

:deep(.el-button-group .el-button) {
  padding: 4px 8px;
}

:deep(.el-calendar-table) {
  border-spacing: 4px;
  border: none;
}

:deep(.el-calendar-table td) {
  border: none;
  padding: 2px;
  height: 60px;  /* 增加单元格高度 */
}

.weather-card {
  height: 280px;
  margin-top: 20px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.weather-content {
  height: calc(100% - 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.weather-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.weather-icon {
  font-size: 48px;
  color: #1890ff;
}

.weather-basic {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.temperature {
  font-size: 36px;
  font-weight: bold;
  background: linear-gradient(45deg, #1890ff, #1d39c4);
  -webkit-background-clip: text;
  color: transparent;
  font-family: DIN Alternate, Arial, sans-serif;
  line-height: 1;
}

.weather-desc {
  font-size: 16px;
  color: #666;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999;
  font-size: 14px;
}

.weather-right {
  padding-left: 20px;
  border-left: 1px solid #f0f0f0;
}

.weather-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.detail-item span:first-child {
  font-size: 12px;
  color: #999;
}

.detail-item span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 加刷新按钮动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

:deep(.el-button:hover .el-icon) {
  animation: rotate 1s linear infinite;
}

.avatar-wrapper {
  position: relative;
}

.unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff4d4f;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.contact-item {
  position: relative;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.contact-item:hover {
  background: #f5f7fa;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-detail {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-role {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style> 